<template>
  <Container class="create-sale bg-light">
    <Tabs value="tab1">
      <TabPane class="scroll" label="创建促销活动" name="tab1">
        <div class="card-list">
          <div v-for="item in list" :key="item.id" class="card" @mouseover="onShowDetail(item, 1)" @mouseout="onShowDetail(item)">
            <Icon :type="item.icon" class="icon" />
            <div class="info">
              <p class="x-big">{{ item.title }}</p>
              <p class="font-gray">{{ item.content }}</p>
            </div>
            <div class="mask">
              <Button type="primary" @click="jumpPage(item.link)">立即创建</Button>
            </div>
          </div>
        </div>
        <div v-show="showDetail" class="detail">
          <div class="title"><Icon type="md-information-circle" class="icon" />{{ target.title }}</div>
          <div v-for="item in target.introduce" :key="item.id" class="mb">{{ item }}</div>
          <div class="title"><Icon type="md-information-circle" class="icon" />{{ target.introTitle }}</div>
          <ul class="for-color">
            <li v-for="(item, index) of target.introList" :key="index">{{ item }}</li>
          </ul>
          <div v-if="target.example" class="title"><Icon type="md-information-circle" class="icon" />举例</div>
          <div class="mb">{{ target.example }}</div>
        </div>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
export default {
  data () {
    return {
      showDetail: false,
      target: {},
      list: [
        {
          id: 1,
          title: '单品促销',
          content: '商品交易折扣价',
          icon: 'md-apps',
          introduce: [
            '在指定时间段内，直接调整商品的实际销售单价；促销价在商品详情页替换零售价位置，将零售价划线展示；',
            '订单以促销后的价格进行计算；',
            'SKU同一时段不允许重复参加相同促销;',
            '该形式促销在商品详情页价格处不展示促销标签'
          ],
          introTitle: '单品促销活动形式有:',
          introList: [
            '直降型，将商品零售价直接打折或减价；',
            '限量抢购，通过设定限购一单、售空数量和限定每个SKU的销售数量上限'
          ],
          example: '商品A零售价100元，单品折扣80元出售，商品展示金额直接展示80元，100元划去，商品以促销后的价格结算；其他促销活动也是以单品促销后的价格计算是否参加和参加的阶梯',
          link: 'sales/single'
        },
        {
          id: 2,
          title: '赠品促销',
          icon: 'md-basket',
          content: '买指定商品送赠品',
          introduce: [
            '在活动期限内购买任意活动主商品达到最少购买数量免费获得促销中所有赠品；',
            '赠品是叠加赠送，每满一次最少购买数量赠一份赠品，依此类推；',
            '最少购买数量是每个主商品SKU最少购买数量后送赠品；',
            'SKU同一时段不允许重复参加相同促销',
            '该形式促销在商品详情页展示促销标签[赠品]'
          ],
          introTitle: '赠品促销说明：',
          introList: [
            '促销设置完成后，主商品编码下新增SKU不会参加该活动',
            '相同SKU可同时作为主商品和赠品，赠品SKU限1-5个，每个SKU数量限1-20'
          ],
          example: '设置活动最少购买数量2，主商品A设置赠品 A 、B、E各1个，下单A商品4个,则赠品为A+B+E两份',
          link: 'sales/gift/rules'
        },
        {
          id: 3,
          title: '满减促销',
          content: '满额减促',
          icon: 'md-pricetags',
          introduce: [
            '在活动期间内，用户购买活动商品满指定金额后享受一定减价优惠；',
            '该形式促销在商品详情页展示促销标签[满减]'
          ],
          introTitle: '促销类型：',
          introList: [
            '阶梯满减：渐进式设置满额减价条件，最多可设三档；一个订单只能享受最优惠的那档满减额度；',
            '每满减：只设置一档额减价条件，一个商品按照下单金额，成倍享受满减额度，不足额度的不纳入计算'
          ],
          example: '阶段满减：【如满100-20，满200-40，满300-60，比如消费满800享受300-60促销一次】；每满减：【如设置满300-20，则商品金额满600就是40，满1000就是60元以此类推】',
          link: 'sales/fullsub/rules'
        },
        {
          id: 4,
          title: '满赠促销',
          content: '满额换购',
          icon: 'ios-cube',
          introduce: [
            '在活动有效期内，用户购买活动商品满足指定金额时，可免费或支付一定费用获得设置的赠品；',
            '该形式促销在商品详情页展示促销标签[满赠]'
          ],
          introTitle: '促销类型：',
          introList: [
            '满赠促销：设置满指定金额赠指定商品，最多可设置三个阶梯且每档金额必须大于上个阶梯；单订单满足最大阶梯促销可在赠品区中选择赠品一份，选择后自动加入订单以0元计算，不选择不加入订单；',
            '加价购促销：设置满指定金额可加价指定金额获赠指定商品，最多可设置三个阶梯且每档金额必须大于上个阶梯；一个订单满足最大阶梯可在加价购区中选择赠品一份；选择后自动加入订单以加价金额计算，不选择不加入订单'
          ],
          example: '【满赠促销】：如满100元赠纸巾一份，需手动从赠品区中选择赠品一份。【加价购促销】：如满100元可选择加价10元，换购毛巾一条，需手动从赠品区中选择赠品一份。选择赠品后订单 订单金额加上加价金额计算',
          link: 'sales/fullGift'
        },
        {
          id: 5,
          title: '满减送促销',
          content: '满额减额加价购',
          icon: 'ios-cart',
          introduce: [
            '在活动有效期内，用户购买活动商品满足指定金额时，享受一定的减价优惠，另可加价或不加价获得赠品；',
            '促销内的赠品需手动在赠品区选择且仅能选择一件商品，不选择不加入订单；',
            '赠品加入订单以加价金额计算；',
            '该形式促销在商品详情页展示促销标签[满减送]'
          ],
          introTitle: '促销有多种组合：',
          introList: [
            '满减送促销：如满100元减20元再送纸巾',
            '满减加价换购：如满100元减10元，加15元获赠毛巾一条',
            '满减：满100元减20元；',
            '满元加价换购：满100元，加15元获赠毛巾一条',
            '满元送赠品：满100元，送纸巾'
          ],
          link: 'sales/fullSubGift'
        },
        {
          id: 6,
          title: '多买优惠促销',
          content: '满件任选  满额打折',
          icon: 'md-pricetags',
          introduce: ['在活动有效期内，用户购买商品满足指定件数时，可享受指定优惠；该形式促销在商品详情页展示促销标签[多买优惠]'],
          introTitle: '多买优惠促销类型',
          introList: [
            '满M件减N件：设置满M件减N件，减件条件必须小于满件，结算时仅收取(M-N)件金额；',
            'M件N折：设置满M件打N折，结算时按N折后的金额计算'
          ],
          example: '【M件减N件】：如满2减1，减去订单商品中1件商品金额；【M件N折】：如活动商品满3件打8折',
          link: 'sales/more/rules'
        },
        // {
        //   id: 7,
        //   title: "套装促销",
        //   content: "商品搭配售卖",
        //   introduce: "在活动有限期间，将几种商品组合销售并享受一定优惠的形式；该形式促销在商品详情页展示促销标签",
        //   introTitle: "套装促销类型",
        //   introList: [
        //     "满M件减N件：如满2免1，免去活动商品中最低价的商品金额",
        //     "M元任选N件：如活动商品100元2件",
        //     "M件N折：如活动商品满3件打8折"
        //   ],
        //   link: 'sales/package'
        // },
        {
          id: 8,
          title: '满额返券',
          content: '满额返优惠劵',
          icon: 'ios-infinite',
          introduce: [
            '在活动有效期内，用户购买指定商品满足指定金额时，给下单的用户帐户返本店商品适用的优惠券；',
            '此券在订单结算时不展示，必需满足活动设置后优惠券自动发放到用户优惠券帐户中；',
            '该形式促销在商品详情页展示促销标签[返券]'
          ],
          introTitle: '满额返劵活动说明',
          introList: [
            '用户需在指定时间段内下单，在指定时间点前完成订单，且指定时间内未发生退货，才可获得返券;',
            '此类活动一经创建，不可修改，不可关闭'
          ],
          example: '在11.1-11期间购买指定商品，且在7天内完成订单并且在15天内未申请退款的订单 ，自动赠送指定优惠券到用户优惠券帐户中',
          link: 'sales/fullReturn/rules'
        },
        {
          id: 9,
          title: '工厂特价',
          content: '工厂特价',
          icon: 'ios-body',
          introduce: [
            '工厂特价商品购买成功后可赠送中策渠道的积分、返利和现金券；',
            '一个商品最多只能赠送一种优惠券；',
            '赠送积分、返利和现金券不是必填项，也可以不送；',
            '赠送的积分、返利和现金券必须门店扫码入库后才能有，且这个扫码有时间限制；'
          ],
          introTitle: '工厂特价说明',
          introList: [
            '优惠券必须先创建好，才能在创建工厂特价活动创建时选择对应的优惠券；',
            '一个商品同一个时间内只能参与一个活动；'
          ],
          link: 'sales/bargain/rules'
        }
      ]
    }
  },
  mounted () {
    this.getFactoryPromotionCareateInfo()
  },
  methods: {
    onShowDetail (item, type) {
      // 当鼠标进入的时候
      if (type) {
        this.target = item
        this.showDetail = true
      } else {
        this.showDetail = false
      }
    },
    getFactoryPromotionCareateInfo () {
      // 是否可以创建工厂特价促销
      this.$jsonPost('/activity/factory_info/is_cloud/create').then(res => {
        if (!res) {
          this.list.splice(this.list.findIndex(item => item.id === 9), 1)
        }
      })
    },
    jumpPage (address) {
      this.$router.push({
        name: address
      })
    }
  }
}
</script>

